<template>
    <view class="kanban-container">
        <!--<u-navbar bgColor="rgba(33,61,198,1)" :placeholder="true">
            <view slot="left">
                <view class="search-box" @click="onWorkshopChange">
                    <view class="header-box-workshop-item-val">{{ searchParams.workshopName || '暂无车间' }}</view>
                    <u-icon name="arrow-down-fill" size="13" color="#fff"></u-icon>
                </view>
            </view>
            <view slot="center" style="color: #fff;font-size: 30rpx;">生产看板</view>
        </u-navbar>-->
        <view class="header-box">
            <view class="search-box" @click="onWorkshopChange">
                <view class="header-box-workshop-item-val">{{ searchParams.workshopName || '暂无车间' }}</view>
                <u-icon name="arrow-down-fill" size="13" color="#fff"></u-icon>
            </view>
            <view class="header-box-bell-icon">
                <!--<u-icon name="bell-fill" size="22px" color="#fff"></u-icon>-->
            </view>
            <view class="header-box-inner">
                <view class="header-box-total-qty-val">
                    <u-count-to :decimals="1" :startVal="oldHeaderChartData.shiftQty" :endVal="headerChartData.shiftQty" separator="," color="#fff" font-size="34px" bold></u-count-to>
                </view>
                <view class="header-box-total-qty-label">当班总产量(KG)</view>
                <view class="header-box-inner-content">
                    <view class="header-box-inner-content-item">
                        <view class="header-box-inner-content-item-label">品种数</view>
                        <view class="header-box-inner-content-item-val">
                            <u-count-to :startVal="oldHeaderChartData.productCount" :endVal="headerChartData.productCount" separator="," color="#fff" font-size="20px"></u-count-to>
                        </view>
                    </view>
                    <view class="header-box-inner-content-item">
                        <view class="header-box-inner-content-item-label">当班能耗</view>
                        <view class="header-box-inner-content-item-val">
                            <u-count-to :decimals="1" :startVal="oldHeaderChartData.shiftEnergy" :endVal="headerChartData.shiftEnergy" separator="," color="#fff" font-size="20px"></u-count-to>
                        </view>
                    </view>
                    <view class="header-box-inner-content-item">
                        <view class="header-box-inner-content-item-label">设备数</view>
                        <view class="header-box-inner-content-item-val">
                            <u-count-to :startVal="oldHeaderChartData.openMachineCount" :endVal="headerChartData.openMachineCount" separator="," color="#fff" font-size="20px"></u-count-to>
                            <span>/</span>
                            <u-count-to :startVal="oldHeaderChartData.machineCount" :endVal="headerChartData.machineCount" separator="," color="#fff" font-size="20px"></u-count-to>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class="card-item margin-bottom-30">
            <view class="card-title">最近班次产量及盈亏</view>
            <chart3 :chartData="scheduleShiftQtyData"></chart3>
        </view>
        <view class="card-item" style="margin-bottom: 0;">
            <view class="card-title">设备</view>
            <view class="card-item-content" @click="onJump('/pages/machineMonitor/index')">
                <view class="card-item-content_item">
                    <view class="card-item-content_item-label">总数</view>
                    <view class="card-item-content_item-value">
                        <u-count-to :startVal="oldHeaderChartData.machineCount" :endVal="headerChartData.machineCount" separator="," color="#fff" font-size="20px"></u-count-to>
                    </view>
                </view>
                <view class="card-item-content_item">
                    <view class="card-item-content_item-label">排产</view>
                    <view class="card-item-content_item-value">
                        <u-count-to :startVal="oldHeaderChartData.openMachineCount" :endVal="headerChartData.openMachineCount" separator="," color="#fff" font-size="20px"></u-count-to>
                    </view>
                </view>
                <view class="card-item-content_item">
                    <view class="card-item-content_item-label">待机</view>
                    <view class="card-item-content_item-value">
                        <u-count-to :startVal="oldHeaderChartData.stopMachineCount" :endVal="headerChartData.stopMachineCount" separator="," color="#fff" font-size="20px"></u-count-to>
                    </view>
                </view>
                <view class="card-item-content_item">
                    <view class="card-item-content_item-label">离线</view>
                    <view class="card-item-content_item-value">
                        <u-count-to :startVal="oldHeaderChartData.offLineMachineCount" :endVal="headerChartData.offLineMachineCount" separator="," color="#fff" font-size="20px"></u-count-to>
                    </view>
                </view>
            </view>
        </view>
        <view class="flex-start-center chart-container margin-bottom-30">
            <view style="width: 50%;"><machine-chart1 :chart-data="headerChartData"></machine-chart1></view>
            <view style="width: 50%;"><machine-chart2 :chart-data="headerChartData"></machine-chart2></view>
        </view>
        <view class="card-item" style="margin-bottom: -20rpx;">
            <view class="card-title">订单生产进度</view>
        </view>
        <view class="chart-container">
            <orderProgress :chart-data="orderList"></orderProgress>
        </view>
        <view class="card-item" style="margin-bottom: -20rpx;">
            <view class="card-title">当班机台效率排行</view>
        </view>
        <view class="chart-container">
            <view class="padding-bottom-20">
                <machineEfficiencyRanking :chart-data="efficiencyList"></machineEfficiencyRanking>
            </view>
        </view>
        <view class="card-item" style="margin-bottom: -20rpx;">
            <view class="card-title">当班停机时长排行</view>
        </view>
        <view class="chart-container">
            <view class="padding-bottom-20">
                <machineStopTimeList :chart-data="machineYieldList"></machineStopTimeList>
            </view>
        </view>
        <jkPopupOption
            :value="searchParams.workshopId"
            :show="selectWorkshopPopupOptionState"
            :optionList="workshopList"
            :show-all="false"
            @visible-change="(e) => selectWorkshopPopupOptionState = e"
            @confirm="onConfirmOfSelectWorkshop"
        ></jkPopupOption>
    </view>
</template>
<script>
    import machineChart1 from "./components/machine-chart1";
    import machineChart2 from "./components/machine-chart2";
    import headerChart from "./components/header-chart";
    import chart3 from "./components/chart3";
    import {
        reportProductionHomeData,
        reportProductionHomeDataMachineRunningEfficiencyTop,
        reportProductionHomeDataMachineStopTimeTop,
        reportProductionHomeDataMachineYieldTop,
        reportProductionHomeDataProductCurrentShiftYield,
        reportProductionOrderTracking
    } from "../../api";
    import orderProgress from './components/order-progress';
    import machineStopTimeList from './components/machine-stop-time-list';
    import machineEfficiencyRanking from './components/machine-efficiency-ranking';
    import jkPopupOption from "../../jk-components/jk-popup-option";
    export default {
        components: {
            jkPopupOption,
            machineEfficiencyRanking,
            machineStopTimeList,
            orderProgress,
            headerChart,
            machineChart1,
            machineChart2,
            chart3
        },
        data() {
            return {
                efficiencyList: [],
                machineYieldList: [],
                orderList: [],
                scheduleShiftQtyData: [],
                oldHeaderChartData: {
                    productCount: 0,
                    shiftQty: 0,
                    shiftEnergy: 0,
                    avgSpindleSpeed: 0,
                    machineCount: 0,
                    openMachineCount: 0,
                    stopMachineCount: 0,
                    offLineMachineCount: 0
                },
                headerChartData: {},
                workshopList: [],
                searchParams: {
                    workshopId: null
                },
                selectWorkshopPopupOptionState: false,
                interVal: {}
            };
        },
        onShow() {
            if (!this.searchParams.workshopId) {
                this.$set(this.searchParams, 'workshopId', getApp().globalData.defaultWorkshop.id);
                this.$set(this.searchParams, 'workshopName', getApp().globalData.defaultWorkshop.name);
            }
            this.workshopList = getApp().globalData.defaultWorkshop.list;
            this.run();
        },
        methods: {
            onConfirmOfSelectWorkshop(e, item) {
                this.$set(this.searchParams, 'pageNo', 1);
                this.$set(this.searchParams, 'workshopId', item.id);
                this.$set(this.searchParams, 'workshopName', item.name);
                this.selectWorkshopPopupOptionState = false;
                this.getListRequest();
            },
            onJump(path) {
                wx.navigateTo({
                    url: path
                });
            },
            clearInterVal() {
                clearInterval(this.interVal);
            },
            run() {
                this.getDependentData();
                this.clearInterVal();
                this.interVal = setInterval(() => {
                this.getDependentData();
                }, 3000);
            },
            getMachineYieldRequest() {
                return reportProductionHomeDataMachineStopTimeTop({
                    workshopId: this.searchParams.workshopId,
                    processCode: 'XS'
                }).then(res => {
                    if (res.data.status === 200) {
                        this.machineYieldList = res.data.res.map(x => {
                            return x;
                        });
                    }
                });
            },
            getOrderProgressRequest() {
                return reportProductionOrderTracking().then(res => {
                    if (res.data.status === 200) {
                        this.orderList = res.data.res.map(x => {
                            x.progress = Number(((x.completionQty / x.orderQty) * 100).toFixed(1)) + '%';
                            return x;
                        });
                    }
                });
            },
            // 机台效率排行
            getEfficiencyRankingListRequest() {
                return reportProductionHomeDataMachineRunningEfficiencyTop({
                    workshopId: this.searchParams.workshopId,
                    processCode: 'XS'
                }).then(res => {
                    if (res.data.status === 200) {
                        this.efficiencyList = res.data.res;
                    }
                })
            },
            async getDependentData() {
                await this.getChartData();
                await this.getOrderProgressRequest();
                await this.getEfficiencyRankingListRequest();
                await this.getMachineYieldRequest();
                await this.getScheduleShiftQtyDataRequest();
            },
            getScheduleShiftQtyDataRequest() {
                if (!this.searchParams.workshopId) return false;
                return reportProductionHomeDataProductCurrentShiftYield({
                    workshopId: this.searchParams.workshopId,
                    processCode: 'XS'
                }).then(res => {
                    if (res.data.status === 200) {
                        this.scheduleShiftQtyData = res.data.res || {};
                    }
                })
            },
            getChartData() {
                if (!this.searchParams.workshopId) return false;
                return reportProductionHomeData({
                    workshopId: this.searchParams.workshopId,
                    processCode: 'XS'
                }).then(res => {
                    if (res.data.status === 200) {
                        this.headerChartData = res.data.res || {};
                    }
                });
            },
            onWorkshopChange() {
                this.selectWorkshopPopupOptionState = true;
            }
        },
        onUnload() {
            this.clearInterVal();
        },
        onHide() {
            this.clearInterVal();
        },
        watch: {
            headerChartData: {
                handler(newVal, oldVal) {
                    this.oldHeaderChartData = oldVal ? JSON.parse(JSON.stringify(oldVal)) : {
                        totalShiftQty: 0,
                        totalShiftOutput: 0,
                        totalEnergy: 0,
                        shiftOutput: 0,
                        shiftQty: 0,
                        shiftEnergy: 0,
                        avgSpindleSpeed: 0,
                        machineCount: 0,
                        openMachineCount: 0,
                        stopMachineCount: 0,
                        offLineMachineCount: 0
                    };
                },
                deep: true
            }
        }
    }
</script>
<style scoped lang="scss">
    .kanban-container {
        position: relative;
        background: #f8f8f9;
        .header-box {
            height: 380rpx;
            background-image: linear-gradient(-0deg, rgba(87, 140, 243, 1) 0%, rgba(17, 120, 240, 1) 48%, rgba(33, 61, 198, 1) 100%);
            //background: linear-gradient(180deg, rgba(33,61,198,1) 42%, rgba(17,120,240,1) 78%, rgba(17,120,240,1) 78%, rgba(87,140,243,1) 89%);
            display: flex;
            justify-content: center;
            align-items: flex-end;
            position: relative;

            .header-box-workshop-item {
                position: absolute;
                top: 20rpx;
                left: 30rpx;
                display: flex;
                align-items: center;
                color: #fff;

                .header-box-workshop-item-val {
                    margin-right: 8rpx;
                }
            }

            .header-box-bell-icon {
                position: absolute;
                top: 20rpx;
                right: 30rpx;
            }

            .header-box-inner {
                width: 94%;
                height: 180rpx;
                margin-bottom: -60rpx;
                //background: #708bf5;
                //background: #fff;
                border-radius: 20rpx;
                position: relative;
                background: url("../../static/index/bg.png") no-repeat center;
                background-size: 100% 100%;

                .header-box-total-qty-label {
                    width: 100%;
                    text-align: center;
                    color: #bdc9fa;
                    font-size: 26rpx;
                    margin-top: 10rpx;
                    position: absolute;
                    top: 0;
                    left: 0;
                }

                .header-box-total-qty-val {
                    height: 80rpx;
                    line-height: 80rpx;
                    margin-top: -80rpx;
                    text-align: center;
                }

                .header-box-inner-content {
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: flex-end;

                    .header-box-inner-content-item {
                        width: calc(100% / 3);
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        color: #bdc9fa;
                        font-size: 28rpx;
                        padding-bottom: 10rpx;

                        .header-box-inner-content-item-label {
                            font-size: 26rpx;
                            margin-bottom: 4rpx;
                        }

                        .header-box-inner-content-item-val {}
                    }
                }
            }
        }

        .search-box {
            height: 56rpx;
            background: #3c56d3;
            border-radius: 24rpx;
            padding: 0 24rpx;
            display: flex;
            align-items: center;
            color: #fff;
            z-index: 9999;
            font-size: 24rpx;
            .header-box-workshop-item-val {
                margin-right: 8rpx;
            }
        }
        .chart-container {
            padding: 0rpx 40rpx;
            box-sizing: border-box;
            background: #fff;
            margin-bottom: 30rpx;
        }
        .header-box {
            height: 300rpx;
            background-image: linear-gradient(-0deg, rgba(87, 140, 243, 1) 0%, rgba(17, 120, 240, 1) 48%, rgba(33, 61, 198, 1) 100%);
            position: relative;
            margin-bottom: 80rpx;
            .search-box {
                position: absolute;
                left: 24rpx;
                top: 24rpx;
                height: 56rpx;
                background: rgba(87, 140, 243, .8);
                border-radius: 24rpx;
                padding: 0 24rpx;
                display: flex;
                align-items: center;
                color: #fff;
                z-index: 9999;
                font-size: 24rpx;
                .header-box-workshop-item-val {
                    margin-right: 8rpx;
                }
            }

            .header-box-workshop-item {
                position: absolute;
                top: 20rpx;
                left: 30rpx;
                display: flex;
                align-items: center;
                color: #fff;
                z-index: 9999;
                .header-box-workshop-item-val {
                    margin-right: 8rpx;
                }
            }

        }
        .card-item {
            padding: 20rpx 32rpx;
            margin-bottom: 30rpx;
            background: #fff;
            .card-title {
                font-weight: 700;
                font-size: 30rpx;
                color: #515a6e;
                border-left: solid 8rpx #2d8cf0;
                padding-left: 8rpx;
                margin-bottom: 20rpx;
            }
            .card-item-content {
                border: solid 1px #eee;
                border-radius: 12rpx;
                padding: 20rpx;
                box-sizing: border-box;
                display: flex;
                background: #447DF5;
                .card-item-content_item {
                    width: calc(100% / 4);
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    flex-direction: column;
                    padding: 0 8rpx;
                    .card-item-content_item-label {
                        font-size: 25rpx;
                        color: #e8eaec;
                    }
                    .card-item-content_item-value {
                        color: #fff;
                    }
                }
            }
        }
    }
</style>
